<div class="top-baaner">
    <img class="lazy img-center" src="./images/201604061.png">
    <img class="slider-absolute" src="./images/20160406101.png" style="bottom: 0px;left: 0px;">
    <img class="slider-absolute" src="./images/20160406102.png" style="top: 0px;right: 0px;">
</div>
<div class="w1022 hd-product-list" style="margin-top: 35px;">
    <ul class="list-1 clearfloat" id="Spring-Hot-Sale">
        <!-- li用js循环输出 -->
    </ul>
</div>

<div class="w1022 hd-product-list">
    <img src="./images/201604068.jpg" id="Mobile-Phone" alt="Control everything with your NEW PHONE">
    <ul class="control-list">
        <li class="active">Hot sale above $200</li>
        <li>$200~$130</li>
        <li>$130~$90</li>
        <li>Under $90</li>
    </ul>
    <div class="control-show">
        <div class="show-block active">
            <div class="block-left">
                <div class="ck-slide" style="width: 506px;height: 678px;">
                    <div class="banner-slider ck-slide-dir">
                        <ul class="ck-slide-wrapper slider-content">
                            <li>
                                <img src="./images/2016040617.jpg" usemap="#map1" />
                            </li>
                            <li>
                                <img src="./images/2016040620.jpg" usemap="#map2" />
                            </li>
                        </ul>
                        <div class="ctrl-slide ck-prev controll-arrow" style="left:0"></div>
                        <div class="ctrl-slide ck-next controll-arrow" style="right:0"></div>
                        <div class="clearfloat"></div>
                    </div>
                </div>
                <map name="map1">
                    <area href="#" shape="rect" coords="0,0,500,347">
                    <area href="#" shape="rect" coords="0,347,500,694">
                </map>
                <map name="map2"><area href="#" shape="rect" coords="0,0,500,347">
                    <area href="#" shape="rect" coords="0,347,500,694">
                </map>
            </div>

            <div class="block-right">
                <div class="hd-product-list">
                    <ul class="list-2 lists-4">
                    </ul>
                </div>
            </div>
            <div class="clearfloat"></div>
            <div class="display-list">
                <div class="hd-product-list">
                    <ul class="list-2 lists-4 clearfloat">
                        <!-- 4个li -->
                    </ul>
                </div>
            </div>
        </div>
        <div class="show-block">
            <div class="block-right">
                <div class="ck-slide" style="width: 506px;height: 678px;">
                    <div class="banner-slider ck-slide-dir">
                        <ul class="ck-slide-wrapper slider-content">
                            <li>
                                <img src="./images/2016040617.jpg" usemap="#map3" />
                            </li>
                            <li>
                                <img src="./images/2016040620.jpg" usemap="#map4" />
                            </li>
                        </ul>
                        <div class="ctrl-slide ck-prev controll-arrow" style="left:0"></div>
                        <div class="ctrl-slide ck-next controll-arrow" style="right:0"></div>
                        <div class="clearfloat"></div>
                    </div>
                </div>
                <map name="map3">
                    <area href="#" shape="rect" coords="0,0,500,347">
                    <area href="#" shape="rect" coords="0,347,500,694">
                </map>
                <map name="map4">
                    <area href="#" shape="rect" coords="0,0,500,347">
                    <area href="#" shape="rect" coords="0,347,500,694">
                </map>
            </div>

            <div class="block-left">
                <div class="hd-product-list">
                    <ul class="list-2 lists-4"></ul>
                </div>
            </div>
            <div class="clearfloat"></div>
            <div class="display-list">
                <div class="hd-product-list">
                    <ul class="list-2 lists-8 clearfloat"></ul>
                </div>
            </div>
        </div>
        <div class="show-block">
            <div class="block-left">
                <div class="ck-slide" style="width: 506px;height: 678px;">
                    <div class="banner-slider ck-slide-dir">
                        <ul class="ck-slide-wrapper slider-content">
                            <li>
                                <img src="./images/2016040617.jpg" usemap="#map4" />
                            </li>
                            <li>
                                <img src="./images/2016040620.jpg" usemap="#map5" />
                            </li>
                        </ul>
                        <div class="ctrl-slide ck-prev controll-arrow" style="left:0"></div>
                        <div class="ctrl-slide ck-next controll-arrow" style="right:0"></div>
                        <div class="clearfloat"></div>
                    </div>
                </div>

                <map name="map4">
                    <area href="#" shape="rect" coords="0,0,500,347">
                    <area href="#" shape="rect" coords="0,347,500,694">
                </map>
                <map name="map5">
                    <area href="#" shape="rect" coords="0,0,500,347">
                    <area href="#" shape="rect" coords="0,347,500,694">
                </map>
            </div>

            <div class="block-right">
                <div class="hd-product-list">
                    <ul class="list-2 lists-4 clearfloat"></ul>
                </div>
            </div>
            <div class="clearfloat"></div>
            <div class="display-list">
                <div class="hd-product-list">
                    <ul class="list-2 lists-12 clearfloat">   </ul>
                </div>
            </div>
        </div>
        <div class="show-block">
            <div class="block-right">
                <div class="ck-slide" style="width: 506px;height: 678px;">
                    <div class="banner-slider ck-slide-dir">
                        <ul class="ck-slide-wrapper slider-content">
                            <li>
                                <img src="./images/2016040617.jpg" usemap="#map7" />
                            </li>
                            <li>
                                <img src="./images/2016040620.jpg" usemap="#map8" />
                            </li>
                        </ul>
                        <div class="ctrl-slide ck-prev controll-arrow" style="left:0"></div>
                        <div class="ctrl-slide ck-next controll-arrow" style="right:0"></div>
                        <div class="clearfloat"></div>
                    </div>
                </div>

                <map name="map7">
                    <area href="#" shape="rect" coords="0,0,500,347">
                    <area href="#" shape="rect" coords="0,347,500,694">
                </map>
                <map name="map8">
                    <area href="#" shape="rect" coords="0,0,500,347">
                    <area href="#" shape="rect" coords="0,347,500,694">
                </map>
            </div>

            <div class="block-left">
                <div class="hd-product-list">
                    <ul class="list-2 lists-4"></ul>
                </div>
            </div>
            <div class="clearfloat"></div>
            <div class="display-list">
                <div class="hd-product-list">
                    <ul class="list-2 lists-16 clearfloat"></ul>
                </div>
            </div>
        </div>
    </div>
    <img src="./images/201604069.jpg" id="Smart-Accessories" alt="Your smart Accessories are always needed!" style="width:100%;">
    <div id="scrollPics-1">
        <ul class="slider-1 clearfloat">
            <li class="curr">
                <a href="#">
                    <img src="./images/2016040610.jpg" alt="Original MEIZU Earphone EP-21HD Earphone 3.5mm HiFi Headset with MiC Control Talk"
                    />
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/2016040611.jpg" alt="XIAOMI LED USB Light Portable USB Light Blue"
                    />
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/2016040612.jpg" alt="Original Protective Case Flip Cover Case PU Case for UMI IRON Smartphone- Black"
                    />
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/2016040613.jpg" alt="High Speed 8GB TF Card Micro-SD Card for Elephone P3000S P3000 Smartphone"
                    />
                </a>
            </li>
        </ul>
        <div class="controll-slider-1 controll-arrow left" style="left:0"></div>
        <div class="controll-slider-1 controll-arrow right ck-next" style="right:0"></div>
       
    </div>

    <div class="display-list">
        <div class="hd-product-list">
            <ul class="list-2 lists-8 clearfloat"></ul>
        </div>
    </div>
    <div class="banner-show">
        <a href="hd-20160409-es.html" id="Special-Store-Spain">
            <img style="width:506px;margin-right: 5px;" src="./images/2016040623.jpg" alt="">
        </a>
        <a href="hd-20160409-de.html" id="Special-Store-Germany">
            <img style="width:506px;" src="./images/2016040624.jpg" alt="">
        </a>
    </div>
    <div class="panel-layout">
        <ul>
            <li>
                <a href="#Spring-Hot-Sale">Spring Hot Sale</a>
            </li>
            <li>
                <a href="#Mobile-Phone">Mobile Phone</a>
            </li>
            <li>
                <a href="#Smart-Accessories">Smart Accessories</a>
            </li>
            <li>
                <a href="#Special-Store-Spain">Special Store Spain</a>
            </li>
            <li>
                <a href="#Special-Store-Germany">Special Store Germany</a>
            </li>
            <li>
                <a id="hd-scrollTop" href="#Top"></a>
            </li>
        </ul>
    </div>

    <style>
        .hd-product-list ul{padding-left: 0px;}
        .top-baaner{width: 100%;text-align: center;position: relative;}
        .slider-absolute{position: absolute;}
        .hd-product-list .list-1 li{width: 329px;height: 395px;overflow: hidden;float: left;text-align: center;position: relative;margin-bottom: 15px;margin-right: 15px;}
        .hd-product-list .list-1 li:nth-child(3n+3){margin-right: 0px;}
        .list-1 .product-info img{width: 255px;height: 225px;}
        .list-1 .product-info{margin-top: 10px;}
        .product-info .info{font-size: 24px;color: #333;}
        .ico-line{width: 55px;border-bottom: 2px solid #333;margin: 25px auto 0px;}
        .product-layout{position: absolute;width: 100%;height: 100%;top: 0;left: 0;background: rgba(0, 0, 0, 0.65);display: none;}
        .hd-product-list .list-1 li:hover .product-layout{display: block;}
        .product-layout .layout-info{margin-top: 295px;background: #13a538;height: 100px;}
        .layout-info .text{font-size: 15px;color: #Fff;padding-top: 10px;margin-bottom: 0;height: 45px;line-height: 22px;}
        .old-price{font-size: 16px;color: #fff;text-decoration: line-through;}
        .new-price{font-size: 30px;color: #e6113a;font-weight: bold;}
        .layout-info .price-btn-buy{float: left;margin-left: 10px;}
        .btn-buy{font-size: 18px;color: #fff100;font-weight: bold;float: right;margin: 10px 10px 0 0;}
        .new-price .price-small{font-size: 18px;font-weight: normal;}
        .hd-product-list .control-list{display: block;background: #13a538;height: 45px;line-height: 45px;margin: 10px 0 0;}
        .control-list li{font-size: 24px;color: #fff;display: inline-block;text-align: center;width: 225px;border-right: 1px solid #fff100;cursor: pointer;}
        .control-list li:first-child{width: 325px;}
        .control-list li:last-child{border-right: none;}
        .control-list li.active{color: #fff100;}
        .banner-slider{height: 678px;width: 506px;overflow: hidden;position: relative;}
        .banner-slider:hover .controll-arrow, #scrollPics-1:hover .controll-arrow{opacity: 0.5;}
        .banner-slider .slider-content{width: 1000px;}
        .banner-slider .slider-content li{float: left;}
        .banner-slider .slider-content img{width: 506px;height: 678px;}
        .controll-arrow{position: absolute;top: 36%;cursor: pointer;height: 100px;width: 45px;background: url(./images/hd-pw_arrow.png)no-repeat;opacity: 0.1}
        .controll-arrow.ck-next{background-position: 100% 0;}
        .banner-slider .slider li{float: left;}
        .block-right{float: right;}
        .block-left{float: left;}
        .block-right .list-2, .block-left .list-2 {width: 506px;}
        .hd-product-list .list-2 li{width: 248px;float: left;border: 1px solid #d2d2d2;list-style: none;margin: 0 10px 10px 0;height: 334px;text-align: center;position: relative;background: #fff;box-sizing: border-box;}
        .hd-product-list .block-right .list-2 li:nth-child(2n + 2),.hd-product-list .block-left .list-2 li:nth-child(2n + 2)  {margin-right:0;}
        .hd-product-list .list-2.lists-8 li:nth-child(4n) {margin-right:0;}
        .display-list .hd-product-list .list-2 li:nth-child(4n) {margin-right:0;}
        .list-2 li img{width: 100%;height: 217px;}
        .list-2 .text{font-size: 14px;color: #666;height: 18px;margin-bottom: 5px;overflow: hidden;padding: 0px 5px;line-height: 18px;}
        .list-2 .old-price{font-size: 14px;color: #333;}
        .list-2 .btn-action{background: #13a538;color: #fff;padding: 5px 15px;font-weight: bold;font-size: 16px;display: inline-block;margin-top:5px;}
        .list-2 .btn-action:hover{color: rgb(255, 153, 0);background: #1D983C;}
        .list-2 .discount-num{position: absolute;top: 0px;right: 0px;background: url(./images/discount-ico.png)no-repeat;width: 60px;height: 84px;font-size: 24px;color: #fff;padding-top: 5px;}
        .control-show{margin-bottom: 10px;}
        #scrollPics-1{width: 1022px;overflow: hidden;position: relative;margin: 5px 0px;}
        #scrollPics-1 .ck-slide-wrapper li{list-style: none;float: left;width: 1022px;}
        .hd-product-list .list-2 li:hover img{opacity: 0.6;}
        .show-block{display: none;}
        .show-block.active{display: block;}
        #scrollPics-1 .slider-1{width: 99999px;}
        #scrollPics-1 .slider-1 li{list-style: none;float: left;width: 1022px;}
        #scrollPics-1 .slider-1 li img {width:100%;}
        .banner-show{margin: 20px 0 45px 0;}
        .banner-show img{height: 250px;}
        .panel-layout{background: url(./images/2016040627.png)no-repeat;width: 154px;height: 360px;position: fixed;top: 0;margin-left: 1034px;display: none;}
        .panel-layout ul li{margin-bottom: 14px;list-style: none;}
        .panel-layout ul{margin-top: 87px;}
        .panel-layout ul li a{display: block;height: 26px;width: 100%;opacity: 0;}
        #hd-scrollTop{display: block;width: 82px;height: 57px;margin-left: 36px;opacity: 0;}
    </style>

    <script type="text/javascript">
        (function ($) {
            var str1 = '';
            for(var i = 0; i < 6; i ++){
                str1 += ` <li>
                <div class="product-info">
                    <p class="info">OUKITEL K4000 Pro</p>
                    <div class="ico-line"></div>
                    <img src="./images/2016040616.jpg" alt="OUKITEL K4000 Pro Smartphone 4600mAh 5.0 Inch Tempered Glass 2GB 16GB Quad Core Black">
                </div>
                <div class="product-layout">
                    <div class="layout-info">
                        <p class="text">Smartphone 4600mAh 5.0 Inch Tempered Glass 2GB 16GB Quad Core Black</p>
                        <p class="price-btn-buy">
                            <span class="old-price">$139.99</span>
                            <span class="new-price">$112
                                <span class="price-small">.99</span>
                            </span>
                        </p>
                        <a class="btn-buy" href="#">View More&gt;&gt;</a>
                    </div>
                </div>
            </li>`;
            }
            $("#Spring-Hot-Sale").append(str1);
            var str2 =  `<li>
                            <img src="./images/2016040616.jpg" alt="XIAOMI redmi note3 4GB 32GB">
                            <div class="product-info">
                                <p class="text">XIAOMI redmi note3 4GB 32GB</p>
                                <p class="price-btn-buy">
                                    <span class="old-price">$249.99</span>
                                    <span class="new-price">$249
                                        <span class="price-small">.99</span>
                                    </span>
                                </p>
                                <a class="btn-action" href="#">View More&gt;&gt;</a>
                            </div>
                            <p class="discount-num">12%<br>OFF</p>
                        </li>`;
            var str2_1 = '';
            for (var i = 0; i < 4; i++){
                str2_1 += str2;
            }
            $(".lists-4").append(str2_1);
            var str2_8 = '';
            for(var i = 0; i < 8; i++){
                str2_8 += str2;
            }
            $(".lists-8").append(str2_8);
            var str2_12 = '';
            for(var i = 0; i < 12; i++){
                str2_12 += str2;
            }
            $(".lists-12").append(str2_12);
            var str2_16 = '';
            for(var i = 0; i < 16; i++){
                str2_16 += str2;
            }
            $(".lists-16").append(str2_16);

            var len1 = $("#scrollPics-1 .slider-1 li").length;
            var index1 = 0;
            var adTimer1;
            $(".controll-slider-1").on("click", function () {
                index1 = $(".slider-1 li.curr").index();
                if ($(this).hasClass("left")) {
                    if (index1 == 0) {
                        index1 = len1;
                    }
                    index1--;
                } else if ($(this).hasClass("right")) {
                    index1++;
                    if (index1 == len1) {
                        index1 = 0;
                    }
                }
                showImg1(index1);
            });

            $('#scrollPics-1').hover(function () {
                clearInterval(adTimer1);
            }, function () {
                adTimer1 = setInterval(function () {
                    showImg1(index1)
                    index1++;
                    if (index1 == len1) {
                        index1 = 0;
                    }
                }, 3000);
            }).trigger("mouseleave");
            function showImg1(index1) {
                var adWidth1 = $("#scrollPics-1>ul>li:first").width();
                $(".slider-1").stop(true, false).animate({
                    "marginLeft": -adWidth1 * index1 + "px"
                }, 600);
                $(".slider-1 li").removeClass("curr").eq(index1).addClass("curr");
            }

            $.fn.ckSlide = function (opts) {
                opts = $.extend({}, $.fn.ckSlide.opts, opts);
                this.each(function () {
                    var slidewrap = $(this).find('.ck-slide-wrapper');
                    var slide = slidewrap.find('li');
                    var count = slide.length;
                    var that = this;
                    var index = 0;
                    var time = null;
                    $(this).data('opts', opts);
                    // next
                    $(this).find('.ck-next').on('click', function () {
                        if (opts['isAnimate'] == true) {
                            return;
                        }

                        var old = index;
                        if (index >= count - 1) {
                            index = 0;
                        } else {
                            index++;
                        }
                        change.call(that, index, old);
                    });
                    // prev
                    $(this).find('.ck-prev').on('click', function () {
                        if (opts['isAnimate'] == true) {
                            return;
                        }

                        var old = index;
                        if (index <= 0) {
                            index = count - 1;
                        } else {
                            index--;
                        }
                        change.call(that, index, old);
                    });
                    $(this).find('.ck-slidebox li').each(function (cindex) {
                        $(this).on('click.slidebox', function () {
                            change.call(that, cindex, index);
                            index = cindex;
                        });
                    });
                    // focus clean auto play
                    $(this).siblings('map').on('mouseover', function () {
                        if (opts.autoPlay) {
                            clearInterval(time);
                        }
                        $(this).find('.ctrl-slide').css({ opacity: 0.6 });
                    });
                    //  leave
                    $(this).siblings('map').on('mouseleave', function () {
                        if (opts.autoPlay) {
                            startAtuoPlay();

                        }
                        $(this).find('.ctrl-slide').css({ opacity: 0.15 });
                    });

                    $(this).on('mouseover', function () {
                        if (opts.autoPlay) {
                            clearInterval(time);
                        }
                        $(this).find('.ctrl-slide').css({ opacity: 0.6 });
                    });
                    //  leave
                    $(this).on('mouseleave', function () {
                        if (opts.autoPlay) {
                            startAtuoPlay();
                        }
                        $(this).find('.ctrl-slide').css({ opacity: 0.15 });
                    });
                    startAtuoPlay();
                    // auto play
                    function startAtuoPlay() {
                        if (opts.autoPlay) {
                            time = setInterval(function () {
                                var old = index;
                                if (index >= count - 1) {
                                    index = 0;
                                } else {
                                    index++;
                                }
                                change.call(that, index, old);
                            }, 3000);
                        }
                    }
                    // 修正box
                    var box = $(this).find('.ck-slidebox');
                    box.css({
                        'margin-left': -(box.width() / 2)
                    })
                    // dir
                    switch (opts.dir) {
                        case "x":
                            opts['width'] = $(this).width();
                            slidewrap.css({
                                'width': count * opts['width']
                            });
                            slide.css({
                                'float': 'left',
                                'position': 'relative'
                            });
                            slidewrap.wrap('<div class="ck-slide-dir"></div>');
                            slide.show();
                            break;
                    }
                });
            };
            function change(show, hide) {
                var opts = $(this).data('opts');
                if (opts.dir == 'x') {
                    var x = show * opts['width'];
                    $(this).find('.ck-slide-wrapper').stop().animate({ 'margin-left': -x }, 1000, function () { opts['isAnimate'] = false; });
                    opts['isAnimate'] = true
                } else {
                    $(this).find('.ck-slide-wrapper li').eq(hide).stop().animate({ opacity: 0 });
                    $(this).find('.ck-slide-wrapper li').eq(show).show().css({ opacity: 0 }).stop().animate({ opacity: 1 });
                }

                $(this).find('.ck-slidebox li').removeClass('current');
                $(this).find('.ck-slidebox li').eq(show).addClass('current');
            }
            $.fn.ckSlide.opts = {
                autoPlay: false,
                dir: null,
                isAnimate: false
            };

            $('.ck-slide').ckSlide({
                dir: 'x',
                autoPlay: true
            });
            $(".hd-product-list .control-list li").hover(function () {
                var ListIndex = $(this).index();
                $(".control-list li").removeClass("active").eq(ListIndex).addClass("active");
                $(".control-show .show-block").removeClass("active").eq(ListIndex).addClass("active");
            });

            var sideNav = $(".panel-layout");
            $(window).on("scroll", function () {
                if ($(this).scrollTop() >= $(".top-baaner").outerHeight(true)) {
                    sideNav.show();
                }
                else {
                    sideNav.hide();
                }
            });
            sideNav.find("li").find("a").on("click", function (e) {
                e.preventDefault();
                var aHash = this.hash;
                $("html,body").animate({
                    scrollTop: aHash == "#Top" ? 0 : $(aHash).offset().top - 30
                });
            });
        })(jQuery);   
    </script>
</div>